<template>
 <div class="nav-bar">
    <div class="left"><slot name="left"></slot></div>
    <div class="center"><slot name="center"></slot></div>
    <div class="right"><slot name="right"></slot></div>
 </div>
</template>

<script>
 export default {
     name: 'NavBar',
   data () {
     return {

     }
   },
   created() {

   },
   methods: {

   }
 }
</script>

<style scoped>
  .nav-bar {
      display: flex;
      height: 44px;
      line-height: 44px;
      box-shadow: 0 2px 0 rgb(0, 0, 0,.2);
      
  }
  .nav-bar .left,
  .right {
      width: 5rem;
  }
  .nav-bar .center {

      flex: 1px;
      text-align: center;
  }
</style>
